// 列表页 逻辑代码
//右侧导航栏
$('.sn i').on({
    mouseover(){
      $(this).nextAll().addClass('active').fadeIn(100)
      // $(this).nextAll('.b').addClass('active').fadeIn(100)
    },
    mouseout() {
      $(this).nextAll().removeClass('active').fadeOut(100)
  },
  })
$('.header .sy').click(function(){
    window.location.href = './index.html'
})
$('.gwc').click(function(){
  window.location.href = './cart.html'
})
// 获取元素
const box = document.querySelector('.box')
//获取筛选大盒子内的元素
//获取 分类  right 元素
const cateBox = document.querySelector('.category > .right')
//获取 筛选  right 元素
const filterBox = document.querySelector('.filter > .right')
//获取 折扣  right 元素
const saleBox = document.querySelector('.sale > .right')
//获取 排序  right 元素
const sortBox = document.querySelector('.sort > .right')
// 获取商品列表主体内容 
const listBox = document.querySelector('.list')

//获取表单按键 元素
//上一页
const leftBtn = document.querySelector('.pagenation > .right > .left')
//下一页
const rightBtn = document.querySelector('.pagenation > .right > .right')
//  当前页/总页数
const totalBtn = document.querySelector('.pagenation > .right > .total')
//  每页多少条
const selectBox = document.querySelector('.pagenation > .right > select')
//  跳转页数
const inp = document.querySelector('.pagenation > .right > input')

//模糊输入框
const searchInp = document.querySelector('.search > .right > input')

// 搜索框
const inpt = document.querySelector('form > .hq')
const ulBox = document.querySelector('form > ul')
inpt.oninput = function () {
    // 拿到用户输入的内容去搜索
    const text = inpt.value.trim()
    // 使用 jsonp 的手段请求到数据
    // 创建一个 script 标签
    const script = document.createElement('script')
    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31660,26350&wd=${text}&req=2&csor=1&cb=handler&_=1639190662005`
    // 插入到页面才能发送出去
    document.body.appendChild(script)
    // 删除掉
    script.remove()
}
function handler(res) {
    // 1. 判断 res 内是否有 g 这个数组
    // 如果没有, 不渲染
    if (!res.g) {
        ulBox.style.display = 'none'
        return
    }

    // 代码能执行到这里, 说明 res.g 是有数据的
    // 2. 渲染页面
    let str = ''
    res.g.forEach(item => {
        str += `
        <li>${item.q}</li>
      `
    })
    ulBox.innerHTML = str
    ulBox.style.display = 'block'
} 
// 请求分类列表
getCateList()
async function getCateList() {
    // 发送请求分类
    const res = await pAjax({
        url: 'http://localhost:8888/goods/category',
        dataType: 'json'
    })
    //利用res.list 渲染页面
    let str = '<li class="cate active">全部</li>'
    res.list.forEach(item => {
        str += `
        <li class="cate">${item}</li>
        `
    })
    cateBox.innerHTML = str
}
//准备一个变量， 表示参数
const listInfo = {
    current: 1,
    pagesize: 12,
    search: '',
    filter: '',
    saleType: 10,
    sortType: 'id',
    sortMethod: 'ASC',
    category: ''
  }
//请求商品列表
getGoodsList()
async function getGoodsList() {
  // 2-1. 发送请求
  const res = await pAjax({
    url: 'http://localhost:8888/goods/list',
    dataType: 'json',
    data: listInfo
  })

  // 2-2. 渲染页面
  let str = ''
  res.list.forEach(item => {
    str += `
      <li data-id='${item.goods_id}'>
        <div class="show">
          <img src="${ item.img_big_logo }" alt="">
          ${ item.is_hot ? '<span class="hot">HOT</span>' : '' }
          ${ item.is_sale ? '<span class="sale">SALE</span>' : '' }
        </div>
        <div class="info">
          <p class="title">
            ${ item.title }
          </p>
          <p class="price">
            <span class="current">
              ￥${ item.current_price }
            </span>
            <span class="old">
              ￥${ item.price }
            </span>
          </p>
          <p class="add">
            <button data-id='${item.goods_id}'>加入购物车</button>
          </p>
        </div>
      </li>
    `
  })
  listBox.innerHTML = str

    // 渲染分页器相关信息
    // 左按钮
    leftBtn.className = listInfo.current === 1 ? 'left disable' : 'left'
    //右按钮
    rightBtn.classList = listInfo.current === res.total ? 'right disable' : 'right'
    //  当前页 /  总页数
    totalBtn.innerText = listInfo.current + '/' + res.total
    // 每页多少条
    selectBox.value = listInfo.pagesize
    inp.value = listInfo.current
    inp.dataset.total = res.total
}
// 商品筛选事件
// 事件委托
box.addEventListener('click',e=>{
    //判断点击的是分类按钮
    if(e.target.className === 'cate'){
        //切换类名
        for(let i = 0; i<cateBox.children.length; i++){
            //清除类名
            cateBox.children[i].classList.remove('active')
        }
        //点击那个 给哪个添加类名
        e.target.classList.add('active')
        // 修改 listInfo 内的信息
        const text = e.target.innerText
        //修改的是 category 信息
        listInfo.category = text === '全部' ? '' : text
        //回到第一页
        listInfo.current = 1
        //重新渲染页面
        getGoodsList()
    }
    //判断点击的是筛选按钮
    if(e.target.className === 'filter_item'){
        //切换类名
        for(let i = 0; i<filterBox.children.length; i++){
            //清除类名
            filterBox.children[i].classList.remove('active')
        }
        //点击那个 给哪个添加类名
        e.target.classList.add('active')
        // 修改 listInfo 内的信息
        //修改的是 filter 信息
        listInfo.filter =e.target.dataset.type
        //回到第一页
        listInfo.current = 1
        //重新渲染页面
        getGoodsList()
    }
    //判断点击的是折扣按钮
    if(e.target.className === 'sale_item'){
        //切换类名
        for(let i = 0; i<saleBox.children.length; i++){
            //清除类名
            saleBox.children[i].classList.remove('active')
        }
        //点击那个 给哪个添加类名
        e.target.classList.add('active')
        // 修改 listInfo 内的信息
        listInfo.saleType =e.target.dataset.type
        //回到第一页
        listInfo.current = 1
        //重新渲染页面
        getGoodsList()
    }
    //判断点击的是排序按钮
    if(e.target.className === 'sort_item'){
        //切换类名
        for(let i = 0; i<sortBox.children.length; i++){
            //清除类名
            sortBox.children[i].classList.remove('active')
        }
        //点击那个 给哪个添加类名
        e.target.classList.add('active')
        // 修改 listInfo 内的信息
        listInfo.sortType =e.target.dataset.type
        listInfo.sortMethod =e.target.dataset.method
        //重新渲染页面
        getGoodsList()
    }
    //判断点击的是下一页
    if(e.target.className === 'right' && e.target.nodeName === 'SPAN'){
        listInfo.current++
        getGoodsList()
    }
    //判断点击的是上一页
    if(e.target.className === 'left' && e.target.nodeName === 'SPAN'){
        listInfo.current--
        getGoodsList()
    }
    //判断点击的是跳转按钮
    if(e.target.className === 'go'){
        //拿到前一个文本框内的 value
        let page = e.target.previousElementSibling.value - 0
        const total = e.target.previousElementSibling.dataset.total - 0
        // 判断 时候是NAN
        if(!page) page = 1
        if(page < 1) page = 1
        if(page >= total) page = total
        page = parseInt(page)
        //修改 listInfo 内的信息
        listInfo.current = page
        getGoodsList()
    }
})
//一页显示多少条 selsct
selectBox.addEventListener('change',()=>{
    //修改 listInfo 内的信息
    listInfo.pagesize = selectBox.value
    listInfo.current = 1 
    getGoodsList()
})
//模糊搜索
 searchInp.addEventListener('input',() =>{
     //修改listInfo内的信息
     listInfo.search = searchInp.value.trim()
     listInfo.current = 1
     getGoodsList()
 })
 //点击跳转详情页  点击加入购物车
 //事件委托 给 listBox
 listBox.addEventListener('click', e =>{
   //判断点击的是li 标签  跳转到详情页
   //注： 让li内的标签都进行穿透效果
   if(e.target.nodeName === 'LI'){
     // 拿到你点击的这个商品的 id, 把 id 存储在 localStroage 内 或者 sessionStroage 内
     // 渲染页面的时候, 把 该商品的 商品id 渲染在 标签身上
     const goodsId = e.target.dataset.id
     window.sessionStorage.setItem('goodsId',goodsId)
    //  跳转到详情页
    window.location.href = './detail.html'
   }
   //判断点击的是加入购物车按钮 添加到购物车
   if(e.target.nodeName === 'BUTTON'){
     //拿到当前商品的id
     const goodsId = e.target.dataset.id
     //把该商品添加到购物车
     addCart(goodsId)
   }
 })
 //加入购物车的处理函数
  async function addCart(goodsId){
     // 拿到 localStroage 内的 id 和 token 
     const id = window.localStorage.getItem('id')
     const token = window.localStorage.getItem('token')
     //验证id 是否存在
     if(!id){
       //询问文本
       const res = window.confirm("您还没有登录，请登录后在购买, 点击确定跳转回登录页, 点击取消留在当前页面")
       if(res){
        // 点击确认后 跳转到登录页
        window.location.href = './login.html'
        return
       }
       //点击取消后什么也不做
       return
     }

     //发送请求
     const res = await pAjax({
      url: 'http://localhost:8888/cart/add',
      method: 'POST',
      data: { id, goodsId },
      headers: { authorization: token },
      dataType: 'json'
     })
     if( res.code === 401){
      const res = window.confirm("您登录已过期，请重新登录后在购买, 点击确定跳转回登录页, 点击取消留在当前页面")
       if(res){
        // 点击确认后 跳转到登录页
        window.location.href = './login.html'
        return
       }
       //点击取消后什么也不做
       return
     }
     if(res.code === 1){
       alert('成功加入购物车')
     }
  }
